<div class="home-container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="">
                    <ul>
                    	<li *ngFor="let product of products" (click)="productSelected(product)" [ngClass]="{active:product.active}">{{product.prodName}}</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9 col-md-8">
				<div class="row prod-explain">
					<div class="col-lg-2 col-md-3">
						<img alt="OpenNCloud" class="img-responsive center-block" src="assets/img/product/swan.png" />
					</div>
					<div class="col-lg-10 col-md-9">
						<h3>{{selectedProduct.prodName}}</h3>
						<p>
							<small> {{selectedProduct.prodExplain}} </small>
						</p>
					</div>
				</div>
			</div>
        </div>
    </div>
    <div class="row">
        <div *ngFor="let discnt of discnts" class="col-md-4 discnt" [ngClass]="{active:discnt.active}">
            <div class="panel b">
                <div class="panel-heading">
                    <h4>{{discnt.discntName}}</h4></div>
                <div class="panel-body">
                    <p>
                    	{{('crm.component.product.billingCycle' | translate) || '计费周期: '}}&nbsp;&nbsp;&nbsp;{{discnt.billingCycle}} 
                    	{{discnt.cycleUnit === 'Y'?('crm.component.product.year' | translate) || '年':discnt.cycleUnit === 'M' ? ('crm.component.product.month' | translate) || '月': ''}}
                    	<br>
                    	{{('crm.component.product.unitPrice' | translate) || '套餐单价: '}}&nbsp;&nbsp;&nbsp;{{discnt.maxFee ? discnt.maxFee/100: ''}} 
                    	{{('crm.component.product.money' | translate) || '元'}}
                    	<br>
                    	{{('crm.component.product.explanation' | translate) || '套餐描述: '}}&nbsp;&nbsp;&nbsp;{{discnt.discntExplain}}
                    	<button type="button" class="btn  btn-default" style="float:right" (click)="selectDiscnt(discnt)">{{('crm.component.product.order' | translate) || '订购'}}</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>